<script setup lang="ts">
import {onMounted, ref} from "vue";
import {reqAllOrderData,reqAllUser,reqAllOrderState} from "@/api/user/user.ts";
import type {AllOrderResponseData,Records} from "@/api/user/type.ts";
import {useRouter} from "vue-router";
import {AllOrderState, AllOrderStateResponseData, AllUser, AllUserResponseData} from "@/api/user/type.ts";
let currentPage = ref<number>(1)
let pageSize = ref<number>(10)
let total = ref<number>(0)
let patientId = ref<string>('')
let orderStatus = ref<string>('')
onMounted(()=>{
  //获取所有的订单数据
  getAllOrderData()
  //获取就诊人列表
  getAllVisitorInfo()
  //获取所有的订单状态
  getAllOrderState()
})
//映射订单数据的数组
let OrderDataArr = ref<Records>([])
/**
 * 获取所有的订单数据
 */
async function getAllOrderData(){
  let res:AllOrderResponseData = await reqAllOrderData(currentPage.value,pageSize.value,patientId.value,orderStatus.value)
  if(res.code==200){
    OrderDataArr.value=res.data.records
    total.value=res.data.total
  }
}
/**
 *每页的数量
 */
function handleSizeChange(){
  getAllOrderData()
}
/**
 * 页数变化时
 */
function handleCurrentChange(){
  getAllOrderData()
}
const $router = useRouter()
/**
 * 跳到详情页
 * @param scope
 */
function goDetail(scope:any){
  $router.push({
    path:'/user/order',
    query:{
      orderId:scope.id
    }
  })
}
let allVisitorInfo = ref<AllUser>([])
/**
 * 获取就诊人列表
 */
async function getAllVisitorInfo(){
  let res:AllUserResponseData = await reqAllUser()
  if(res.code==200){
    allVisitorInfo.value=res.data
  }
  // console.log('获取就诊人列表',res)
}
let allOrderState = ref<AllOrderState>([])
/**
 * 获取所有的订单状态
 */
async function getAllOrderState(){
  let res:AllOrderStateResponseData = await reqAllOrderState()
  if(res.code==200){
    allOrderState.value=res.data
  }
  // console.log('获取所有的订单状态',res)
}
/**
 * 下拉列表选项改变时触发
 */
function changeUser(){
  getAllOrderData()
}
</script>

<template>
<div class="allOrder">
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>挂号订单</span>
      </div>
    </template>
    <div>
      <el-form :inline="true">
        <el-form-item label="就诊人">
          <el-select placeholder="请选择就诊人" v-model="patientId" @change="changeUser">
            <el-option :label="item.name" v-for="item in allVisitorInfo" v-bind:key="item.id" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select placeholder="选择订单状态"  v-model="orderStatus">
            <el-option :label="item.comment" v-for="(item,index) in allOrderState" v-bind:key="index" :value="item.status"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table :data="OrderDataArr" style="width: 100%">
        <el-table-column prop="reserveDate" label="就诊时间" width="110" />
        <el-table-column prop="hosname" label="医院" width="150" />
        <el-table-column prop="depname" label="科室" width="150"/>
        <el-table-column prop="title" label="医生" width="80"/>
        <el-table-column prop="amount" label="医事服务费" width="80"/>
        <el-table-column prop="patientName" label="就诊人" width="80"/>
        <el-table-column prop="param.orderStatusString" label="订单状态" width="160"/>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="primary" plain @click="goDetail(scope)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px;">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="prev, pager, next, jumper,->,sizes,total"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </el-card>
</div>
</template>

<style scoped lang="scss">
.allOrder{

}
</style>